<script>
import NavBar from "../components/NavBar.vue";
import CustomHeader from "components/CustomHeader.vue";
import {useRouter} from "vue-router";
import {onMounted, reactive, toRefs} from "vue";
import {getUserInfo} from "service/user.js";

export default {
  name: "User",
  components: {CustomHeader, NavBar},
  setup(){
    // 通过useRouter方法实例化路由，也可以直接引入src/router/index.js中抛出的路由实例
    const router = useRouter();
    const state = reactive({
      user: {}, // 用户信息对象
      loading: true // 是否加载中
    })
    // 初始化 类似vue2中的mounted生命周期
    onMounted(async () => {
      // 调用getUserInfo方法获取用户信息
      const { data } = await getUserInfo()
      // 接口返回参数
      state.user = data;
      state.loading = false;
    })
    // 前往某个路径，第一个路径为路径地址，第二个参数为路径下的携带参数
    const goTo = (path,query) => {
      router.push({ path, query : query || { } })
    }
    // 返回给模板使用
    return {
      ...toRefs(state),
      goTo
    }
  }
}

</script>

<template>
  <div class="user-box">
    <!--自定义头部，设置noback，没有返回-->
    <custom-header :title="'个人中心'" noback></custom-header>
    <!--骨架屏组件，在没有数据的时候，显示一个占位图片-->
    <!--avatar表示默认头像，row表示占位行数，loading表示是否展示数据-->
    <van-skeleton title :avatar="true" :row="3" :loading="loading">
      <div class="user-info">
        <!--flex布局 左边是头像 右边是用户信息-->
        <div class="info">
          <img src="https://img2.woyaogexing.com/2025/01/06/c5177e0be5291cd89153f734b9ccc104.jpg" alt="">
          <div class="user-desc">
            <!--绑定用户信息-->
            <span>昵称: {{ user.nickName }}</span>
            <span>登录名: {{ user.loginName }}</span>
            <span class="name">个性签名: {{ user.introduceSign }}</span>
          </div>
        </div>
      </div>
    </van-skeleton>
    <ul class="user-list">
      <!--van-hairline--bottom,添加下边1px灰线-->
      <li class="van-hairline--bottom">
        <span>我的订单</span>
        <van-icon name="arrow"/>
      </li>
      <!--goTo方法，接收参数，前往参数对应的组件页面-->
      <li class="van-hairline--bottom" @click="goTo('/setting')">
        <span>账号管理</span>
        <van-icon name="arrow"/>
      </li>
      <li class="van-hairline--bottom">
        <span>地址管理</span>
        <van-icon name="arrow"/>
      </li>
      <li>
        <span>关于我们</span>
        <van-icon name="arrow"/>
      </li>
    </ul>
    <!--公共底部导航栏-->
    <nav-bar></nav-bar>
  </div>
</template>

<style lang="less" scoped>
@import "../theme/custom";
.user-box {
  .user-header {
    .fj();
  }
  .wh(100%,44px);
  line-height: 44px;
  padding: 0 10px;
  color: #252525;
  background: #fff;
  border-bottom: 1px solid #dcdcdc;
  .user-name {
    font-size: 14px;
  }
}
.user-info {
  width: 94%;
  margin: 10px;
  height: 115px;
  background: linear-gradient(90deg,@primary,#51c7c7);
  box-shadow: 0 2px 5px #269090;
  border-radius: 6px;
  .info {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 25px 20px;
    img {
      .wh(60px,60px);
      border-radius: 50%;
      margin-top: 4px;
    }
  }
  .user-desc {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    line-height: 20px;
    font-size: 14px;
    color: #fff;
    span {
      color: #fff;
      font-size: 14px;
      padding: 2px 0;
    }
  }
  .user-list {
    padding: 0 20px;
    margin-top: 20px;
    li {
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      .van-icon-arrow {
        margin-top: 13px;
      }
    }
  }
}

</style>
